<template>
    <div class="global">
        <div class="topIndex">
            <div class="left">
                <img src="../assets/BLOG.jpg" style="width: 50px;height: 50px;" alt="">
                <el-menu :default-active="activeIndex" router class="el-menu-demo" @select="handleSelect"
                    mode="horizontal">
                    <el-menu-item index="/blog">博客</el-menu-item>
                    <el-menu-item index="/type">分类专栏</el-menu-item>
                    <el-menu-item index="/project">项目</el-menu-item>
                    <el-menu-item index="/member">成员</el-menu-item>


                </el-menu>

            </div>
            <div class="right">
                <el-button type="primary" v-if="user !== null" @click="write">写博客</el-button>
                <el-button type="primary" v-if="user !== null" @click="writeproduct">写项目</el-button>

                <div class="tip" @click="login" v-if="user == null">亲，请登录</div>
                <div class="tip" v-else>
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            {{ user.name }}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>个人信息</el-dropdown-item>
                            <el-dropdown-item @click.native="logout()">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                </div>

            </div>

        </div>
        <div class="global-content">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
import service from '@/request';

export default {
    data() {
        return {
            activeIndex: '/blog',
            user: null
        }
    },
    mounted() {
        this.user = JSON.parse(window.localStorage.getItem("user"))
        if (window.localStorage.getItem("axc")) {
            this.activeIndex = window.localStorage.getItem("axc")
        }
    },
    methods: {
        writeproduct() {
            this.$router.push({
                path: "/addProduct"
            })
        },
        write() {
            this.$router.push({
                path: "/addArticle"
            })
        },
        handleSelect(e) {
            console.log(e)
            this.activeIndex = e;
            window.localStorage.setItem("axc", this.activeIndex)
        },
        logout() {
            this.$router.push({
                path: "/login"
            })
            window.localStorage.clear()

        },
        login() {
            this.$router.push({
                path: "/login"
            })
        }
    }
}
</script>
<style>
.el-menu--horizontal>.el-menu-item.is-active {
    border: 0px !important;
}

.el-menu-item.is-active {
    color: #fc5531 !important;
    font-weight: bold;
}

.el-menu.el-menu--horizontal {
    border: 0px !important;
}

.el-menu--horizontal>.el-menu-item {
    border: 0px !important;
}
</style>
<style scoped>
.tip {
    cursor: pointer;

    margin-left: 10px;
}

.global {
    width: 100%;
    height: 100%;
    background: #f5f5f5;

}

.left {
    display: flex;
    align-items: center;
}

.left img {
    vertical-align: middle;
}

.right {
    display: flex;
    align-items: center;
}

.topIndex {
    width: 100%;
    height: 80px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0px 20px;
    box-sizing: border-box;
    align-items: center;
}

.global-content {
    width: 100%;
    height: calc(100% - 80px);
    overflow: auto;
}
</style>